<template>
  <view class="yh-page yh-height">
	<yh-user-address :userAddress="userAddress"/> 
	<order-goods-card :buyGoods="buyGoods" />
	<view class="amount-info">
		<view class="item_info">
			<view class="title">
				可用余额:
			</view>
			<view class="number">
				{{ userAmount.balance }}
			</view>
		</view>
		<view class="item_info">
			<view class="title">
				可用游鹄币:
			</view>
			<view class="number">
				{{ userAmount.coin }}
			</view>
		</view>
	</view>
	<view class="pay_container">
		<view v-for="(payItem,index) in payTypeArray" :key="index" :class="{itemLine:true,selectItem:isSelectItem(payItem)}" @tap="handleToSelectPayType(payItem)">
			<view class="image-logo">
				<image class="image" :src="payItem.logo" mode="aspectFit"></image>
			</view>
			<view class="pay-word">
				{{payItem.word}}
			</view>
		</view>
	</view>
	<view class="pay-button" @tap="handleToPayorder()">
		总金额 {{payOrder.total_price}} 立即支付
	</view>
  </view>
</template>
<script>
  import { wechatPayLogo,balancePayLogo} from '@/config/picUrl'
  import orderGoodsCard from './component/order_goods_card'
  import { checkAll } from '@/utils/chekLogin'
  import { isWechat } from '@/utils/wechat'
  
  import store from '@/store';
  import { mapGetters } from 'vuex';
  
  import { getUserDefaultAddress } from '@/api/youhu/user/address/address'
  import { getUserAmountInfo } from '@/api/youhu/user/user'
  import { userPayOrder } from '@/api/youhu/user/order/order'
  
 function onBridgeReady(data)
  {
  	  WeixinJSBridge.invoke('getBrandWCPayRequest', 
  	  {
  		  "appId": data.appId,  //"wx2421b1c4370ecxxx",   //公众号ID，由商户传入    
  		  "timeStamp":data.timeStamp,//"1395712654",   //时间戳，自1970年以来的秒数    
  		  "nonceStr": data.nonceStr, //"e61463f8efa94090b1f366cccfbbb444",      //随机串    
  		  "package":"prepay_id="+data.prepay_id, //"prepay_id=wx21201855730335ac86f8c43d1889123400",
  		  "signType": "RSA",     //微信签名方式：    
  		  "paySign": data.paySign//"oR9d8PuhnIc+YZ8cBHFCwfgpaK9gd7vaRvkYD7rthRAZ\/X+QBhcCYL21N7cHCTUxbQ+EAt6Uy+lwSN22f5YZvI45MLko8Pfso0jm46v5hqcVwrk6uddkGuT+Cdvu4WBqDzaDjnNa5UK3GfE1Wfl2gHxIIY5lLdUgWFts17D4WuolLLkiFZV+JSHMvH7eaLdT9N5GBovBwu5yYKUR7skR8Fu+LozcSqQixnlEZUfyE55feLOQTUYzLmR9pNtPbPsu6WVhbNHMS3Ss2+AehHvz+n64GDmXxbX++IOBvm2olHu3PsOUGRwhudhVf7UcGcunXt8cqNjKNqZLhLw4jq\/xDg==" //微信签名
  	  },
  	  function(res) {
  		  
  		  if (res.err_msg == "get_brand_wcpay_request:ok") 
  		  {
  			  // 使用以上方式判断前端返回,微信团队郑重提示：
  			  //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
			  uni.navigateTo({
			  	url:'/pages/YouHu/V1/user/order/myOrder/myOrder'
			  })
  		  }
  	  });
   }
   if (typeof WeixinJSBridge == "undefined") 
   {
  	  if (document.addEventListener) 
  	  {
  		  
  		  document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
  	  } 
  	  else if (document.attachEvent) 
  	  {
  		  document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
  		  document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
  	  }
   } 
  
  export default
  {
    // 组件
    components:
    {
		orderGoodsCard
    },
	//属性
    props:
    {
    },
    // 数据
    data()
    {
        return {
          msg: '支付订单',
		  balancePayLogo:balancePayLogo,
		  wechatPayLogo:wechatPayLogo,
		  //用户收货地址
		  userAddress:{
			  id:1,
			  user_name:'收货人',
			  phone:'15688523140',
			  province_name:'山东省',
			  region_name:'烟台市',
			  city_name:'龙口市',
			  address_info:'东江街道程家疃村63号',
			  address_type:10
		  },
		  //购买商品
			 buyGoods:{
				  goods_id:0,
				  goods_sku_id:0,
				  sale_price:'0.00',
				  coin_price:'0.00',
				  picture:null,
				  spuName:'',
				  skuName:'',
				  selectSkuItem:null,
				  goodsSkuArray:[],
				  //选中的skuIndex
				  selectSkuIndex:null,
				  //购买数量默认为1
				  buy_number:1,
			 },
			 //用户账户
			 userAmount:{
				 balance:'1.00',
				 coin:'1.00'
			 },
			 //支付类型数组
			 payTypeArray:[
				 {type:30,logo:balancePayLogo,word:'余额支付'},
				 {type:10,logo:wechatPayLogo,word:'微信支付'},
			 ],
			 payOrder:{
				goods_id:0,
				goods_sku_id:0,
				buy_number:1,
				total_price:'0.00',
				total_coin:'0.00',
				is_use_balance:0,
				is_use_coin:0,
				deduct_coin:'0.00',
				user_address_id:0,
				//默认余额
				pay_type:10,
				shop_id:1
			 }
		  
        }
    },
    // 计算属性
    computed:
    {
		
    },
    // 监听
    watch:
    {

    },
    //页面加载
    onLoad() 
    {
		checkAll()
		this.getUserDefaultAddress()
		const buyGoods = uni.getStorageSync('buyGoods')
		this.buyGoods = buyGoods
		
		//console.log(this.buyGoods)
		this.payOrder.goods_id = this.buyGoods.goods_id
		this.payOrder.goods_sku_id = this.buyGoods.goods_sku_id
		this.payOrder.buy_number = this.buyGoods.buy_number
		this.payOrder.total_price = this.buyGoods.sale_price * this.buyGoods.buy_number
		this.payOrder.total_price = this.payOrder.total_price.toFixed(2)
		this.getUserAmountInfo()
		
    },
    //页面显示
    onShow() 
    {
    
    },
    //页面初次渲染完成
    onReady()
    {
    
    },
    //页面隐藏
    onHide()
    {
    
    },
    //页面卸载
    onUnload()
    {
    
    },
    // 方法
    methods:
    {
		//获取用户默认地址 
		async getUserDefaultAddress()
		{
			const _this = this
			
			const userAddress = await getUserDefaultAddress().then(res=> 
			{
				return new Promise((resolve,reject) => 
				{
					if(res.code === 0)
					{
						resolve(res.data)
					}
				})
			})
			
			this.$set(this.userAddress,'user_name',userAddress.user_name)
			this.$set(this.userAddress,'id',userAddress.id)
			this.$set(this.userAddress,'phone',userAddress.phone)
			this.$set(this.userAddress,'province_name',userAddress.province_name)
			this.$set(this.userAddress,'region_name',userAddress.region_name)
			this.$set(this.userAddress,'city_name',userAddress.city_name)
			this.$set(this.userAddress,'address_info',userAddress.address_info)
			this.$set(this.userAddress,'address_type',userAddress.address_type) 
			
			//console.log(this.userAddress)
		},
		//获取用户账户信息
		async getUserAmountInfo()
		{
			
			
			const userAmountInfo = await getUserAmountInfo().then(res=>
			{
				return new Promise((resolve,reject) =>
				{
					if(res.code === 0)
					{
						resolve(res.data)
					}
				})
			})
			
			if(userAmountInfo)
			{
				console.log(userAmountInfo)
				
				this.$set(this.userAmount,'balance',userAmountInfo.balance)
				this.$set(this.userAmount,'coin',userAmountInfo.coin)
			} 
		},
		//样式判断
		isSelectItem(payItem)
		{
			let result = false
			if(payItem.type === this.payOrder.pay_type)
			{
				result = true
			}
			
			return result
		},
		//选择支付方式
		handleToSelectPayType(payItem)
		{
			this.payOrder.pay_type = payItem.type
		},
		// 提交订单
		handleToPayorder()
		{
		   console.log(this.payOrder)
		   
		   //添加用户地址
		   this.payOrder.user_address_id = this.userAddress.id
		   
		   userPayOrder(this.payOrder).then(res=>{
			   console.log(res)
			   if(res && res.code ===0)
			   {
					onBridgeReady(res.data)
			   }
		   })
		}
		
    }
  }
</script>
<style lang='scss' scoped>
	.amount-info{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		background: #E8F3FF;
		width: 670rpx;
		height: 100rpx;
		margin:0 auto;
		margin-top: 20rpx;
		.item_info{
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			.title{
				height:100rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #848FAC;
				line-height: 100rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
			.number{
				margin-left: 10rpx;
				height: 100rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #000000;
				line-height: 100rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}
		
	}
	.pay_container{
		margin:0 auto;
		margin-top: 20rpx;
		width: 670rpx;
		height: auto;
		.itemLine{
			width: 670rpx;
			height: 100rpx;
			margin-top: 10rpx;
			background: #E8F3FF;
			border:solid #E8F3FF 2rpx;
			display: flex;
			flex-direction: row;
			.image{
				width:80rpx;
				height:80rpx;
				margin-top:10rpx;
				margin-left:30rpx;
			}
			.pay-word{
				height:100rpx;
				line-height: 100rpx;
				margin-left:100rpx;
			}
		}
		.selectItem{
			border:solid #FF530A 2rpx;
		}
	}
.pay-button{
	width: 750rpx;
	height:88rpx;
	position: fixed;
	bottom: 0;
	background: linear-gradient( 133deg, #0D8CE9 0%, #0074FD 77%);
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 30rpx;
	color: #FFFFFF;
	line-height: 80rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
</style>
